home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap24 / dun24_1.txt next >
Encoding:
Text File  |  1997-12-18  |  2.9 KB  |  111 lines
  1. <HTML>
  2.  
  3. <HEAD>
  4.  
  5. <TITLE>
  6.  
  7. Dynamic HTML Multimedia
  8.  
  9. </TITLE>
  10.  
  11. </HEAD>
  12.  
  13.  
  14.  
  15. <SCRIPT LANGUAGE="VBScript">
  16.  
  17. dim dir1_x, dir1_y, dir2_x, dir2_y
  18.  
  19.  
  20.  
  21. 'Set some initial x,y directions for Balloon1
  22.  
  23. dir1_x=5
  24.  
  25. dir1_y=-2
  26.  
  27.  
  28.  
  29. 'Set some initial x,y directions for Balloon2
  30.  
  31. dir2_x=-3
  32.  
  33. dir2_y=4
  34.  
  35.  
  36.  
  37. sub window_onload()
  38.  
  39.     'Start a timer.  Every 100ms (1/10 second), call the
  40.  
  41.     'function that updates the balloon positions.
  42.  
  43.     window.settimeout "moveBalloons()",100
  44.  
  45. end sub
  46.  
  47.  
  48.  
  49. sub swapZOrder()
  50.  
  51.     'Z-Order for the balloons initially are 0 and 1.
  52.  
  53.     'Doing a "NOT" will toggle state of zIndex property
  54.  
  55.     'between 0 and 1. This treats the property as boolean
  56.  
  57.     '     ie: not 1 = 0, not 0 = 1
  58.  
  59.  
  60.  
  61.     balloon1.style.zIndex = not balloon1.style.zIndex
  62.  
  63.     balloon2.style.zIndex = not balloon2.style.zIndex
  64.  
  65. end sub
  66.  
  67.  
  68.  
  69. sub moveBalloons()
  70.  
  71.     bal1_x = balloon1.style.posLeft
  72.  
  73.     bal1_y = balloon1.style.posTop
  74.  
  75.     bal2_x = balloon2.style.posLeft
  76.  
  77.     bal2_y = balloon2.style.posTop
  78.  
  79.  
  80.  
  81.     'If balloon goes off the sides of the screen,
  82.  
  83.     'Change the balloon's direction.
  84.  
  85.     if bal1_x<0 or bal1_x>500 then
  86.  
  87.         dir1_x = -1 * dir1_x
  88.  
  89.     end if
  90.  
  91.  
  92.  
  93.     if bal1_y<0 or bal1_y>400 then
  94.  
  95.         dir1_y = -1 * dir1_y
  96.  
  97.     end if
  98.  
  99.  
  100.  
  101.     if bal2_x<0 or bal2_x>500 then
  102.  
  103.         dir2_x = -1 * dir2_x
  104.  
  105.     end if
  106.  
  107.  
  108.  
  109.     if bal2_y<0 or bal2_y>400 then
  110.  
  111.         dir2_y = -1 * dir2_y
  112.  
  113.     end if
  114.  
  115.  
  116.  
  117.     'We want the balloon to shrink or expand when in the middle,
  118.  
  119.     'depending on the direction of the balloon.
  120.  
  121.     if bal1_x>200 and bal1_x<300 then
  122.  
  123.         balloon1.style.posWidth=balloon1.style.posWidth + dir1_x
  124.  
  125.         balloon1.style.posHeight=balloon1.style.posHeight + dir1_x
  126.  
  127.     end if
  128.  
  129.  
  130.  
  131.     'We want the balloon to shrink or expand again past the middle,
  132.  
  133.     'depending on the direction of the balloon.
  134.  
  135.     if bal1_x>300 and bal1_x<400 then
  136.  
  137.         balloon1.style.posWidth=balloon1.style.posWidth - dir1_x
  138.  
  139.         balloon1.style.posHeight=balloon1.style.posHeight - dir1_x
  140.  
  141.     end if
  142.  
  143.  
  144.  
  145.     balloon1.style.posleft = bal1_x + dir1_x
  146.  
  147.     balloon1.style.posTop = bal1_y + dir1_y
  148.  
  149.  
  150.  
  151.     balloon2.style.posLeft = bal2_x + dir2_x
  152.  
  153.     balloon2.style.posTop = bal2_y + dir2_y
  154.  
  155.  
  156.  
  157.     'Call this function again to create a loop, to continuously move.
  158.  
  159.     window.settimeout "moveBalloons()",100
  160.  
  161. end sub
  162.  
  163.  
  164.  
  165. </SCRIPT>
  166.  
  167.  
  168.  
  169. <BODY>
  170.  
  171. <INPUT TYPE=BUTTON
  172.  
  173.        VALUE="Swap Blue/Green Z-Order"
  174.  
  175.        onClick="swapZOrder()">
  176.  
  177.  
  178.  
  179. <img id=balloon1
  180.  
  181.      style="position:absolute;
  182.  
  183.             left:0px;
  184.  
  185.             top:100px;
  186.  
  187.             width:92px;
  188.  
  189.             height:164px;
  190.  
  191.             z-index:1"
  192.  
  193.      src="balloon1.gif">
  194.  
  195.  
  196.  
  197. <img id=balloon2
  198.  
  199.      style="position:absolute;
  200.  
  201.             width:92px;
  202.  
  203.             height:164px;
  204.  
  205.             left:500px;
  206.  
  207.             top:50px;
  208.  
  209.             z-index:0"
  210.  
  211.      src="balloon2.gif">
  212.  
  213.  
  214.  
  215. </BODY>
  216.  
  217.  
  218.  
  219. </HTML>
  220.  
  221.